<template>
  <view class="main">
    <u-navbar title="采掘查询" :title-bold="true" title-color="#000"></u-navbar>
    <searchcom @searchList="searchList" :isQuert="true"></searchcom>
    <scroll-view
      :scroll-y="true"
      class="u-flex-1 of-hide"
      refresher-enabled="true"
      :refresher-triggered="triggered"
      :refresher-threshold="50"
      refresher-background="#F5F5F5"
      @refresherrefresh="onRefresh"
      @scrolltolower="onScrollToLower"
    >
      <view
        class="flex list"
        v-for="(item, index) in listData"
        :key="index"
        @click="toDeails(item)"
      >
        <view>{{ item.customerName }} </view>
        <u-icon name="arrow-right"></u-icon>
      </view>
      <template v-if="!showEmpty">
        <view class="c-empty p-absolute-center">
          <u-empty
            text="抱歉，暂无相关数据~"
            :src="require('@/static/image/empty.png')"
          ></u-empty>
        </view>
      </template>
      <view class="p-t-10 p-b-10" v-else>
        <u-loadmore :status="status" />
      </view>
    </scroll-view>
  </view>
</template>

<script>
import searchcom from "../earlyWarning/searchCommon.vue";
export default {
  components: { searchcom },
  data() {
    return {
      listData: [],
      searchData: {
        customerStr: "",
        customerNo: "",
        customerName: "",
        warnType: "",
        customerCode: "",
        pageSize: 20,
        pageNumber: 1,
      },
      triggered: false,
      showEmpty: true,
      status: "loading",
    };
  },
  onLoad() {
    this.getList();
  },
  methods: {
    toDeails(item) {
      uni.navigateTo({
        url: "./details?item=" + encodeURIComponent(JSON.stringify(item)),
      });
    },
    searchList(e) {
      this.searchData = Object.assign(this.searchData, e);
      this.getList();
    },
    init() {
      this.searchData.pageNumber = 1;
      this.status = "loading";
      this.showEmpty = true;
    },
    onRefresh() {
      if (this.Isfreshing) return;
      this.Isfreshing = true;
      if (!this.triggered) {
        // 保证刷新状态下，triggered为true
        this.triggered = true;
        this.init();
        this.getList();
        setTimeout(() => {
          this.triggered = false; // 触发onRestore，关闭刷新图标
          this.Isfreshing = false;
        }, 1200);
      }
    },
    onScrollToLower() {
      if (this.status === "loading") {
        this.searchData.pageNumber++;
        this.getList();
      }
    },
    async getList() {
      const { customerCode, pageSize, pageNumber } = this.searchData;
      let url = "/excavation/alarm1/getCustomerList";
      const res = await this.$get(
        `${url}?customerId=${customerCode}&&pageSize=${pageSize}&&pageNumber=${pageNumber}`
      );
      if (res && res.body.content) {
        this.listData =
          this.searchData.pageNumber === 1
            ? res.body.content
            : this.listData.concat(res.body.content);
        // 到底了
        if (res.body.content.length < this.searchData.pageSize) {
          this.status = "nomore";
        }
        // 数据空
        if (
          this.searchData.pageNumber === 1 &&
          this.listData &&
          this.listData.length === 0
        ) {
          this.showEmpty = false;
        } else {
          this.showEmpty = true;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.main{
  background-color: #f4f4f4;
}
.list {
  justify-content: space-between;
  padding: 32rpx;
  background-color: #fff;
  margin: 20rpx 32rpx;
  border-radius: 12rpx;
}
</style>